<template>
  <NewCard>
    <!-- 合同模版的合同详情 -->
    <div class="temBox">
      <div class="temTitle">
    
        <span>合同</span>
        <h3>{{ contractListinfo.name }}</h3>
      </div>
      <div class="temSource">
        {{ contractListinfo.from }}·<span v-if="contractListinfo.createTime">{{
          contractListinfo.createTime.substring(0, 10)
        }}</span>
      </div>
      <div class="temContent">
        <div
          class="contentTxt"
          v-for="(item, index) in contractListinfo.info"
          :key="index"
        >
          <p v-html="item.replace(/\r/g,'</p><p>' )"></p>

          <!-- <p>甲方：旅行社<br />负责人：___________________________</p>
          <p>乙方：<br />身份证：___________________________</p>
          <p>
            根据《中国人民共和国劳动法》和武汉市有关劳动管理办法，甲乙双方经平等协商同意。自愿签订本合同，共同遵守本合同所列各项条款。
          </p>
          <p>
            第一条本合同期限自年月日开始，至___年___月___日终止，其中试用期一个月。
          </p>
          <p>
            第二条
            乙方同意在甲方从事前台接待及旅游顾问工作，并保证与甲方保持劳动合同关系至少半年以上。
          </p>
          <p>
            第三条甲方每月20日支付乙方上月工资，每月基本工资___元，试用期间每月工资为______元
          </p>
          <p>
            第五条
            甲方安排乙方每日工作8小时，甲方保证乙方每周至少休息一日。乙方在法定假日（春节除外）照常工作，甲方应对乙方按每基本工资3倍予以补助。
          </p> -->
        </div>
        <div class="buyTem" v-if="!ispurchase" >
          <el-button round @click="changedemandShow">购买此模板</el-button>
          <p>剩余<span>30%</span>未读</p>
          <p>购买后可查看完整合同</p>
        </div>
      </div>

      <div class="temLabel">
        <el-button
          @click="anserlist(lab)"
          round
          v-for="(lab, index) in showlist"
          :key="index"
          >{{ lab }}
        </el-button>
        <div class="labelMoreclass">
          <!-- <el-button>更多 </el-button> -->
           <el-button
                size="mini"
                class="label_more"
                v-if="showlist.length >7"
                @click="labelMore"
                >{{ flagMore ? "更多" : "收起"
                }}<i :class="
                    flagMore == true
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-top'
                  "
                ></i
              ></el-button>
        </div>
      </div>
      <div class="ribbon_con">
        <!-- <Ribbon></Ribbon> -->
        <Ribbon :detail="collect" :listActive="type" :isFeat="isFeat"></Ribbon>
      </div>
    </div>
  </NewCard>
</template>

<script>
import Ribbon from "./ribbon/ribbon.vue";
import NewCard from "@/wss/components/newCard.vue";
export default {
  name: "ContractTemplate",
  props: ["demandShow", "contractListinfo", "ispurchase"],
  components: { NewCard, Ribbon },
  data() {
    return {
      type: "4",
      collect: {},
      list:[],
      flagMore:true,
      isFeat:true,
      // ispurchase:true,
      showlist: [], //标签默认展示
    };
  },
  mounted() {
    // this.ispurchase =ispurchase
    this.$bus.$on("father", (e) => {
      // console.log(e,"eeeee")
    });
  },
  watch: {
    contractListinfo: {
      handler(val) {
        this.list=val.labels
        this.collect = val;
        this.collect.title = val.name;
        this.collect.type = 4;
        // console.log(val,"zheshibiaosdhi");
        this.showlist = val.labels?val.labels.slice(0, 8):[];
      },
      deep: true,
    },
  },
  methods: {
    anserlist(label) {
      // 当前不在搜索页，跳转到搜索页，然后再搜索
      this.$router.push({ path: "/Bm-search/searchAnswer", query: { label } });
    },
    changedemandShow() {
      // console.log(this.demandShow,"demandShow")
      this.$emit("tofather",[4,this.contractListinfo] );
    },
     labelMore() {
      const _this = this;
      const list = _this.list;
      let showlist = _this.showlist;
      // 是否是收起
      if (!_this.flagMore) {
        _this.showlist = list.slice(0, 10);
        _this.flagMore = !_this.flagMore;
        return;
      }
      // 当前长度
      let length = showlist.length;
      console.log(length,"lengthlengthlength");
      // 最大的长度
      let maxlength = list.length;
      console.log(maxlength,"123321");
      // list够6就加6
      if (length + 8 < maxlength) {
        _this.showlist = [...showlist, ...list.slice(length, length + 8)];

        // 不够到底，全部给，并且把更多改成收起
      } else {
        _this.flagMore = !_this.flagMore;
        _this.showlist = list;
      }
    },
  },
};
</script>

<style scoped>
ul,
p,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
::v-deep .top {
  display: none;
}
::v-deep .el-card__body > div {
  padding-top: 0 !important;
  height: 100%;
}
/* 模板标题 */
.temBox {
  padding: 10px 30px;
  height: 100%;
}
.temTitle {
  width: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  padding: 12px 0px;
  z-index: 999;
}
.temTitle > span {
  background-color: #747474;
  padding: 3px 14px;
  border-radius: 15px;
  color: #fff;
  margin-right: 16px;
}
.temTitle > h3 {
  /* font-weight: bold; */
  font-size: 20px;
}
/* 来源 */
.temSource {
  font-size: 12px;
  color: #999;
  padding: 20px 0;
}
/* 合同模板内容 */
.temContent {
  position: relative;
  min-height: 50%;
  /* max-height: 60%; */
  /* height: 400px;
  
overflow: hidden;
white-space: nowrap; 
text-overflow: ellipsis;  */
}
.temContent .contentTxt p {
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 40px;
}
.temContent .buyTem {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 40%;
  background-image: linear-gradient(
    transparent,
    rgba(255, 255, 255, 0.9),
    #fff
  );
}
.temContent .buyTem .el-button {
  background-color: #39486f;
  color: #fff;
  border-color: #39486f;
  /* font-weight: bold; */
  padding: 10px 35px;
  margin-bottom: 15px;
}
.temContent .buyTem .el-button:hover {
  opacity: 0.9;
}
.temContent .buyTem p {
  font-size: 14px;
  color: #666;
  line-height: 22px;
}
.temContent .buyTem p > span {
  color: #f87a23;
}

/* 标签 */
.temLabel {
  width: 100%;
  margin-top: 50px;
}
.temLabel .labelMoreclass {
  text-align: center;
  margin: 0 auto;
}
.temLabel .labelMoreclass .el-button {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
}

.temLabel .el-button {
  width: 10%;
  padding: 10px 0;
  margin: 5px;
  color: #999;
  font-size: 12px;
  background-color: #fff;
  border: 1px solid #d7d7d7;
  text-align: center;
}
.temLabel .el-button + .el-button {
  margin-left: 1.71%;
}
.temLabel .el-button:hover {
  border-color: #f87a23;
  color: #f87a23;
}

/* 底部分享 */
.ribbon_con {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ecedf0;
}
</style>